<template>
    <div class="container">
        <Header class="header" ref="header" :showLogOut="showLogOut" @addressChange="companyAddressChange" />
        <!-- <Iframe url="https://www.720yun.com/t/advkb71bg8w?scene_id=93199876" class="iframe-box" style="position:absolute;z-index: 3;"/> -->
        <img src="https://img.cyeyi.com/databoard/images/bigbg.png" class="big-bg">
        <a href="http://www.chuangyeyi.com" class="link">www.chuangyeyi.com</a>
        <div class="map-area">
            <MapAnimation ref="mapAnimation" @changeArea="changeArea" @setInfoWindowShow="setInfoWindowShow"
                @setInfoWindowPosition="setInfoWindowPosition" @setTipShow="setTipShow" :areaRank="areaRank" />
        </div>
        <CustomInfoWindow v-if="showInfoWindow && tipLeft != '0px'" class="info-window" :areaData="areaData" :hoverAreaName="hoverAreaName"
            :style="{ position: 'absolute', left: infoWindowLeft, top: infoWindowTop }" />
        <Tip v-if="showTip" class="global-tip" :style="{ position: 'absolute', left: tipLeft, top: tipTop }" />
        <div class="data-item">
            <img src="https://img.cyeyi.com/databoard/images/data-item-icon.svg" class="icon" @click="changeMap">
            <div class="item-data">
                <div class="title">企业总数</div>
                <div class="number">{{ statistic.company_total || 0 }}</div>
            </div>
        </div>
        <div class="data-item data-item2">
            <img src="https://img.cyeyi.com/databoard/images/data-item-icon.svg" class="icon">
            <div class="item-data">
                <div class="title">享受政策次数</div>
                <div class="number">{{ statistic.policy_total || 0 }}</div>
            </div>
        </div>
        <div class="condition-box">
            <div class="title">筛选条件 </div>
            <img src="https://img.cyeyi.com/databoard/images/kuang.svg" class="condition-bg">
            <div class="condition-area">
                <div class="condition-item condition-item1">
                    <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                    <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                    <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                    <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                    <div class="tab" :class="[tabIndex == 0 ? 'active' : '']" @click="changeTabIndex(0)">全国政策</div>
                    <div class="tab" :class="[tabIndex == 1 ? 'active' : '']" @click="changeTabIndex(1)">地方政策</div>
                </div>
                <div class="condition-item condition-item2" v-if="tabIndex == 1">
                    <div class="right">
                        <div class="select-box">
                            <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                            <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                            <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                            <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                            <el-select v-model="province" placeholder="省" class="city-select-item" size="small" disabled
                                popper-class="select-item" @change="provinceChange">
                                <el-option v-for="item in provinces" :key="item.area_code" :label="item.area_name"
                                    :value="item.area_code">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="select-box select-box2">
                            <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                            <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                            <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                            <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                            <el-select v-model="city" placeholder="市" class="city-select-item city-item" size="small"
                                disabled popper-class="select-item" @change="cityChange">
                                <el-option v-for="item in citys" :key="item.area_code" :label="item.area_name"
                                    :value="item.area_code">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="select-box select-box3">
                            <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                            <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                            <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                            <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                            <el-select v-model="area" placeholder="不限" class="city-select-item area-item" size="small"
                                popper-class="select-item" @change="areaChange">
                                <el-option v-for="item in areas" :key="item.area_code" :label="item.area_name"
                                    :value="item.area_code">
                                </el-option>
                            </el-select>
                        </div>
                    </div>
                </div>
                <div class="condition-item">
                    <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                    <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                    <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                    <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                    <div class="title-box">
                        <span style="margin-right: 0.2vw;">行业类别</span>
                        <el-tooltip effect="dark" content="指由国家统计局定义的产业分类，如：文化及相关产业、生活性服务业 等" placement="bottom">
                            <img src="https://img.cyeyi.com/databoard/images/question.svg" class="el-icon-question"
                                style="width: 0.625vw;">
                        </el-tooltip>
                    </div>
                    <div class="input-box">
                        <el-select v-model="industryCategory" placeholder="请选择类别" class="type-select-item" size="small"
                            :multiple="true" collapse-tags popper-class="select-item" iconName="caret-top"
                            @change="industryCategoryChange">
                            <el-option v-for="item in industryCategorys" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="condition-item">
                    <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                    <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                    <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                    <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                    <div class="title-box">
                        <span style="margin-right: 0.2vw;">行业分类</span>
                        <el-tooltip effect="dark" content="指国民经济行业分类，此处可选1-3级" placement="bottom">
                            <img src="https://img.cyeyi.com/databoard/images/question.svg" class="el-icon-question"
                                style="width: 0.625vw;">
                        </el-tooltip>
                    </div>
                    <div class="input-box">
                        <el-select v-model="category" placeholder="请选择分类" class="type-select-item" size="small"
                            popper-class="select-item" @change="categoryChange">
                            <el-option v-for="item in categorys" :key="item.id" :label="item.title" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="condition-item">
                    <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                    <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                    <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                    <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                    <div class="title-box">
                        <span style="margin-right: 0.2vw;">归口级别</span>
                        <el-tooltip effect="dark" content="指部门的级别，部委的为国家级、厅级部门为省级、局级部门的为市级、区上的部门为区级" placement="bottom">
                            <img src="https://img.cyeyi.com/databoard/images/question.svg" class="el-icon-question"
                                style="width: 0.625vw;">
                        </el-tooltip>
                    </div>
                    <div class="input-box">
                        <el-select v-model="attributeLevel" placeholder="请选择归口级别" class="type-select-item" size="small"
                            :multiple="true" collapse-tags popper-class="select-item" @change="attributeLevelChange">
                            <el-option v-for="item in attributeLevels" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="condition-item">
                    <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                    <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                    <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                    <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                    <div class="title-box">
                        <span style="margin-right: 0.2vw;">归口类别</span>
                        <el-tooltip effect="dark" content="工信口，包含（国家工业和信息化部、省工业和信息化厅、市工业和信息化局、还区级对接工信口的相关部门）"
                            placement="bottom">
                            <img src="https://img.cyeyi.com/databoard/images/question.svg" class="el-icon-question"
                                style="width: 0.625vw;">
                        </el-tooltip>
                    </div>
                    <div class="input-box">
                        <el-select v-model="attributeCategory" placeholder="请选择归口类别" class="type-select-item" size="small"
                            :multiple="true" collapse-tags popper-class="select-item" @change="attributeCategoryChange">
                            <el-option v-for="item in attributeCategorys" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="condition-item">
                    <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                    <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                    <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                    <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                    <div class="title-box">
                        <span style="margin-right: 0.2vw;">部门</span>
                        <el-tooltip effect="dark" content="指政策发布的行政部门" placement="bottom">
                            <img src="https://img.cyeyi.com/databoard/images/question.svg" class="el-icon-question"
                                style="width: 0.625vw;">
                        </el-tooltip>
                    </div>
                    <div class="input-box">
                        <el-select v-model="attribute" placeholder="请选择部门" class="type-select-item" size="small"
                            :multiple="true" collapse-tags popper-class="select-item" @change="attributeChange">
                            <el-option v-for="item in attributes" :key="item.id" :label="item.title" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="condition-item">
                    <img src="https://img.cyeyi.com/databoard/images/left-top.svg" class="left-top">
                    <img src="https://img.cyeyi.com/databoard/images/left-bottom.svg" class="left-bottom">
                    <img src="https://img.cyeyi.com/databoard/images/right-top.svg" class="right-top">
                    <img src="https://img.cyeyi.com/databoard/images/right-bottom.svg" class="right-bottom">
                    <div class="title-box">
                        <span style="margin-right: 0.2vw;">享受政策</span>
                        <el-tooltip effect="dark" content="指政策部门发布过的当前有效相关政策" placement="bottom">
                            <img src="https://img.cyeyi.com/databoard/images/question.svg" class="el-icon-question"
                                style="width: 0.625vw;">
                        </el-tooltip>
                    </div>
                    <div class="input-box">
                        <el-select v-model="getPolicy" placeholder="请选择享受政策" class="type-select-item" size="small"
                            :multiple="true" collapse-tags popper-class="select-item" @change="getPolicyChange">
                            <el-option v-for="item in getPolicys" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
        </div>
        <div class="data-area">
            <div class="left">
                <div class="header-title-box">
                    <img src="https://img.cyeyi.com/databoard/images/ratio.svg" class="icon">
                    <div class="text">各行业企业数占比</div>
                    <img src="https://img.cyeyi.com/databoard/images/title-bg.svg" class="title-bg">
                    <img src="https://img.cyeyi.com/databoard/images/dian.svg" class="dian dian1">
                    <img src="https://img.cyeyi.com/databoard/images/dian.svg" class="dian dian2">
                    <img src="https://img.cyeyi.com/databoard/images/dian.svg" class="dian dian3">
                    <img src="https://img.cyeyi.com/databoard/images/dian.svg" class="dian dian4">
                </div>
                <div class="chart-box">
                    <Pie3d :data="pie3DData" :autoRotate="true" />
                </div>
            </div>
            <div class="mid" v-if="!isObjectEmpty(statistic)">
                <div class="item" v-for="(item, index) in (statistic.category_list || [])" :key="index"
                    @click="handleSecondCategoryClick(item)">
                    <img src="https://img.cyeyi.com/databoard/images/three-point.svg" class="point">
                    <!-- <img :src="require(`../assets/images/icon${(index + 1) % 12 + 1}.svg`)" class="icon"> -->
                    <img :src="`https://img.cyeyi.com/databoard/images/icon${(index + 1) % 12 + 1}.svg`" class="icon">
                    <div class="data-box">
                        <div class="title">{{ item.title }}</div>
                        <div class="data">{{ item.company_count }}</div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="header-title-box">
                    <i class="el-icon-search icon" style="color: #fff;font-size: 1.7vh;"></i>
                    <div class="text">企业明细</div>
                    <img src="https://img.cyeyi.com/databoard/images/title-bg.svg" class="title-bg">
                    <img src="https://img.cyeyi.com/databoard/images/dian.svg" class="dian dian1">
                    <img src="https://img.cyeyi.com/databoard/images/dian.svg" class="dian dian2">
                    <img src="https://img.cyeyi.com/databoard/images/dian.svg" class="dian dian3">
                    <img src="https://img.cyeyi.com/databoard/images/dian.svg" class="dian dian4">
                </div>
                <div class="enterprise-box" v-if="!isObjectEmpty(statistic)">
                    <div class="item" :class="[index % 2 == 0 ? '' : 'ou']"
                        v-for="(item, index) in (statistic.company_list || [])" :key="index">
                        <div class="icon-box">
                            <div class="number" v-if="index >= 3">{{ index + 1 }}</div>
                            <!-- <img :src="require(`../assets/images/rank${index >= 3 ? 4 : index + 1}.svg`)" class="rank-icon"> -->
                            <img :src="`https://img.cyeyi.com/databoard/images/rank${index >= 3 ? 4 : index + 1}.svg`"
                                class="rank-icon">
                        </div>
                        <div class="enterprise-name">{{ item.company_name }}</div>
                        <div class="bg-box"></div>
                    </div>
                    <!-- <div class="item ou">
                        <div class="icon-box">
                            <div class="number">4</div>
                            <img src="https://img.cyeyi.com/databoard/images/rank4.svg" class="rank-icon">
                        </div>
                        <div class="enterprise-name">曲江369互联网有限公司</div>
                        <div class="bg-box"></div>
                    </div> -->
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from '../components/Header.vue'
import Pie3d from '../components/Pie3d.vue'
import MapAnimation from '../components/MapAnimation.vue'
import CustomInfoWindow from '../components/CustomInfoWindow.vue';
import Tip from '../components/Tip.vue';
import store from '@/store';
// import Iframe from '../components/Iframe.vue';
import {
    getIndustryCategoryList,
    getCategoryList,
    getAttributeLevel,
    getAttributeCategory,
    getAttribute,
    getGetPolicy,
    getStandardCategory,
    getProvinceList,
    getCityList
} from "@/api/customer"
export default {
    components: {
        Header,
        Pie3d,
        MapAnimation,
        CustomInfoWindow,
        Tip,
        // Iframe
    },
    props: {
        showLogOut: Boolean
    },
    data() {
        return {
            pie3DData: [],
            type: '',
            types: [],
            industryCategory: [],
            industryCategorys: [],
            category: 0,
            category_level: 0,
            next_category: 0,
            category_level: 0,
            categorys: [],
            attributeLevel: [],
            attributeLevels: [],
            attributeCategory: [],
            attributeCategorys: [],
            attribute: [],
            attributes: [],
            getPolicy: [],
            getPolicys: [],
            tabIndex: 0,
            statistic: {},
            provinces: [],
            province: 27,
            citys: [],
            city: 233,
            areas: [],
            area: '',
            showInfoWindow: false,
            infoWindowLeft: '0px',
            infoWindowTop: '0px',
            areaStatisticData: {},
            areaData: [],
            hoverAreaName: '',
            showTip: false,
            tipLeft: '0px',
            tipTop: '0px',
            areaRank: {}
        }
    },
    async mounted() {
        const info = store.getters['user/info'];
        if(info[1] && info[1].province_code) {
            this.province = info[1].province_code;
        }
        if(info[1] && info[1].city_code) {
            this.city = info[1].city_code;
        }
        this.getProvinceLists();
        this.getCityLists();
        this.grtIndustryCategorys();
        this.getCategoryList();
        this.getAttributeLevel(true);
        this.getAttributeCategory(true);
        this.getAttribute(true);
        this.getGetPolicy();
        await this.getAreaLists();
        this.getStandardCategory();
        // this.getAllAreaStandardCategory();
    },
    methods: {
        setInfoWindowShow(b) {
            this.showInfoWindow = b;
        },
        setTipShow(b, p) {
            this.tipLeft = (Math.floor(p.x) + 30) + 'px';
            this.tipTop = (Math.floor(p.y) - 165) + 'px';
            this.showTip = b;
        },
        setInfoWindowPosition(e, area_code) {
            this.areaData = this.areaStatisticData[area_code] || [];
            let findItem = this.areas.find(item => item.area_code === area_code);
            this.hoverAreaName = findItem.area_name || '';
            this.infoWindowLeft = (Math.floor(e.x) - 264) + 'px';
            this.infoWindowTop = (Math.floor(e.y) - 155) + 'px';
            this.setInfoWindowShow(true);
        },
        changeArea(code) {
            this.$refs.header.changeArea(code);
            this.conditionChange();
        },
        getAreaCode() {
            const code = this.getCode();
            return code.areaCode;
        },
        handleSecondCategoryClick(item) {
            this.next_category = item.id;
            this.next_category_level = item.level;
            this.conditionChange();
        },
        async companyAddressChange() {
            this.conditionChange(false);
            this.$refs.mapAnimation.changeAreaAction(this.getAreaCode());
        },
        getCode() {
            return this.$refs.header.getCode();
        },
        isObjectEmpty(obj) {
            return Object.keys(obj).length === 0 && obj.constructor === Object;
        },
        async changeTabIndex(i) {
            this.tabIndex = i;
            //归口级别、部门、享受政策下拉列表重置
            await this.getAttributeLevel();
            this.conditionChange();
        },
        changeMap() {
            this.$refs.mapAnimation.changeJson();
        },
        //行业类别
        industryCategoryChange(e) {
            this.conditionChange();
        },
        //行业分类
        categoryChange(e) {
            const foundItem = this.categorys.find(item => item.id === e);
            this.category_level = foundItem.level;
            this.next_category = 0;
            this.next_category_level = 0;
            this.conditionChange();
        },
        //归口级别
        async attributeLevelChange(e) {
            await this.getAttribute();
            this.conditionChange();
        },
        async attributeCategoryChange(e) {
            await this.getAttribute();
            this.conditionChange();
        },
        attributeChange(e) {
            this.conditionChange();
        },
        getPolicyChange(e) {
            this.conditionChange();
        },
        async grtIndustryCategorys() {
            let { result } = await getIndustryCategoryList();
            this.industryCategorys = result;
        },
        async getCategoryList() {
            let { result } = await getCategoryList({
                pid: 0
            });
            result = [{
                id: 0,
                title: '全行业',
                level: 0
            }].concat(result);
            this.categorys = result;
        },
        async getAttributeLevel(init = false) {
            let code = {
                provinceCode: '',
                cityCode: '',
                areaCode: '',
            }
            if (this.tabIndex == 1) {
                code = {
                    provinceCode: this.province,
                    cityCode: this.city,
                    areaCode: this.area,
                }
            }
            let { result } = await getAttributeLevel({
                province: code.provinceCode,
                city: code.cityCode,
                area: code.areaCode,
            });

            this.attributeLevels = result;
            let old = this.attributeLevel;
            var news = [];
            for (let oldItem of old) {
                for (let item of result) {
                    if (item.id == oldItem) {
                        news.push(item.id);
                        break;
                    }
                }
            }
            this.attributeLevel = news;
            if (!init) {
                await this.getAttribute();
            }
        },
        async getAttributeCategory(init = false) {
            let { result } = await getAttributeCategory();
            this.attributeCategorys = result;
            if (!init) {
                await this.getAttribute();
            }
        },
        async getAttribute(init = false) {
            let code = {
                provinceCode: '',
                cityCode: '',
                areaCode: '',
            }
            if (this.tabIndex == 1) {
                code = {
                    provinceCode: this.province,
                    cityCode: this.city,
                    areaCode: this.area,
                }
            }
            let { result } = await getAttribute({
                scope_level: this.attributeLevel,
                attribute_type_id: this.attributeCategory,
                province: code.provinceCode,
                city: code.cityCode,
                area: code.areaCode,
            });
            this.attributes = result;
            let old = this.attribute;
            var news = [];
            for (let oldItem of old) {
                for (let item of result) {
                    if (item.id == oldItem) {
                        news.push(item.id);
                        break;
                    }
                }
            }
            this.attribute = news;
            if (!init) {
                await this.getGetPolicy();
            }
        },
        async getGetPolicy() {
            let code = {
                provinceCode: '',
                cityCode: '',
                areaCode: '',
            }
            if (this.tabIndex == 1) {
                code = {
                    provinceCode: this.province,
                    cityCode: this.city,
                    areaCode: this.area,
                }
            }
            let { result } = await getGetPolicy({
                scope_level: this.attributeLevel,
                attribute_type_id: this.attributeCategory,
                province: code.provinceCode,
                city: code.cityCode,
                area: code.areaCode,
                policy_attribute_id: this.attribute
            });
            this.getPolicys = result;
            let old = this.getPolicy;
            var news = [];
            for (let oldItem of old) {
                for (let item of result) {
                    if (item.id == oldItem) {
                        news.push(item.id);
                        break;
                    }
                }
            }
            this.getPolicy = news;
        },
        async getStandardCategory() {
            let companyCode = this.getCode();
            let code = {
                provinceCode: '',
                cityCode: '',
                areaCode: '',
            }
            if (this.tabIndex == 1) {
                code = {
                    provinceCode: this.province,
                    cityCode: this.city,
                    areaCode: this.area,
                }
            }
            let data = {
                scope_level: this.attributeLevel,
                attribute_type_id: this.attributeCategory,
                province: code.provinceCode,
                city: code.cityCode,
                area: code.areaCode,
                policy_attribute_id: this.attribute,
                category_id: this.category,
                level: this.category_level,
                company_province: companyCode.provinceCode,
                company_city: companyCode.cityCode,
                company_area: companyCode.areaCode,
                policy_id: this.getPolicy,
                company_type_ids: this.industryCategory,
            };
            if (this.next_category > 0) {
                data.category_id = this.next_category;
                data.level = this.next_category_level;
            }
            const { result } = await getStandardCategory(data);
            if (result) {
                this.statistic = result;
                let pie3DData = [];
                for (let item of (result.pie || [])) {
                    pie3DData.push({
                        name: item.title,
                        value: item.company_count,
                    });
                }
                this.pie3DData = pie3DData;
                this.areaStatisticData = result.area_list;
                this.areaRank = this.getAreaRank(result.proportion);
            } else if (this.next_category == 0) {
                this.statistic = {};
                this.pie3DData = [];
            }
        },
        getAreaRank(proportion) {
            let sortable = Object.entries(proportion);

            // 使用数组的 sort 方法根据值进行升序排序
            sortable.sort((a, b) => parseFloat(a[1]) - parseFloat(b[1]));

            let currentRank = 0;
            let lastValue = null;
            let sortedProportionKeys = {};

            sortable.forEach((item, index) => {
                const currentValue = item[1];
                if (currentValue !== lastValue) {
                    currentRank++;
                }
                sortedProportionKeys[item[0]] = currentRank - 1;
                lastValue = currentValue;
            });

            return sortedProportionKeys;
        },
        async getAreaStandardCategory(areaCode) {
            let companyCode = this.getCode();
            let code = {
                provinceCode: '',
                cityCode: '',
                areaCode: '',
            }
            if (this.tabIndex == 1) {
                code = {
                    provinceCode: this.province,
                    cityCode: this.city,
                    areaCode: this.area,
                }
            }
            let data = {
                scope_level: this.attributeLevel,
                attribute_type_id: this.attributeCategory,
                province: code.provinceCode,
                city: code.cityCode,
                area: code.areaCode,
                policy_attribute_id: this.attribute,
                category_id: this.category,
                level: this.category_level,
                company_province: companyCode.provinceCode,
                company_city: companyCode.cityCode,
                company_area: areaCode,
                policy_id: this.getPolicy
            };
            if (this.next_category > 0) {
                data.category_id = this.next_category;
                data.level = this.next_category_level;
            }
            const { result } = await getStandardCategory(data);

            return result;
        },
        async getAllAreaStandardCategory() {
            const promises = this.areas.map(item =>
                this.getAreaStandardCategory(item.area_code)
            );

            const results = await Promise.all(promises);
            let resultsObject = {};

            this.areas.forEach((item, index) => {
                if (results[index]) {
                    resultsObject[item.area_code] = results[index];
                    resultsObject[item.area_code].area_name = item.area_name;
                }
            });

            this.areaStatisticData = resultsObject;
        },
        conditionChange(needGetAreaData = true) {
            if (this.timer) {
                clearTimeout(this.timer);
            }
            this.timer = setTimeout(() => {
                this.getStandardCategory();
                // if (needGetAreaData) {
                //     this.getAllAreaStandardCategory();
                // }
            }, 500);
        },
        async getProvinceLists() {
            const { result } = await getProvinceList();
            this.provinces = result;
            this.$refs.header.setProvinceLists(result);
        },
        async getCityLists() {
            const { result } = await getCityList({
                area_code: this.province
            });
            this.citys = result;
            this.$refs.header.setCityLists(result);
        },
        async getAreaLists() {
            const { result } = await getCityList({
                area_code: this.city
            });

            this.areas = [{
                "area_code": '',
                "area_name": "不限"
            }].concat(result);
            this.$refs.header.setAreaLists(this.areas);
        },
        async provinceChange(e) {
            this.city = '';
            this.area = '';
            this.areas = [];
            await this.getCityLists();
            await this.getAttributeLevel(true);
            this.conditionChange();
        },
        async cityChange(e) {
            this.area = '';
            this.getAreaLists();
            await this.getAttributeLevel(true);
            this.conditionChange();
        },
        async areaChange(e) {
            await this.getAttributeLevel(true);
            this.conditionChange(false);
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    width: 100vw;
    height: 100vh;
    position: relative;

    .header {
        z-index: 4;
        position: absolute;
        top: 0;
    }

    .big-bg {
        width: 100vw;
        height: 100vh;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        pointer-events: none;
    }

    .link {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 34.5vh;
        z-index: 3;
        font-size: 2vh;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        background-image: linear-gradient(180deg, #FFFFFF 0%, #698DF0 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .data-item {
        width: 17.7vw;
        height: 11.57vh;
        position: absolute;
        left: 8.1vw;
        top: 13.7vh;
        background: linear-gradient(135deg, rgba(8, 139, 255, 0) 0%, rgba(8, 139, 255, 0.1) 100%);
        border: 1px solid;
        border-image: linear-gradient(225deg, rgba(8, 139, 255, 0), rgba(8, 139, 255, 0.5), rgba(8, 139, 255, 0)) 1 1;
        z-index: 3;
        display: flex;
        flex-direction: row;
        backdrop-filter: blur(3px);

        .icon {
            // width: 4.15vw;
            height: 8.4vh;
            margin: 1.39vh 0 0 0.625vw;
        }

        .item-data {
            display: flex;
            flex-direction: column;
            margin-top: 2.2vh;
            margin-left: 1vw;

            .title {
                font-size: 0.8vw;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                color: #4FC2FF;
                -webkit-background-clip: text;
                // -webkit-text-fill-color: transparent;
            }

            .number {
                font-size: 1.78vw;
                font-family: PingFang SC, PingFang SC;
                font-weight: 600;
                // color: #FFFFFF;
                background-image: linear-gradient(180deg, #B6B7CA 0%, #FFFFFF 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                margin-top: 1.3vh;
            }
        }
    }

    .data-item2 {
        top: 28.51vh;
    }

    .condition-box {
        width: 19.8vw;
        height: 25.5vw;
        position: absolute;
        top: 9.72vh;
        right: 5.75vw;
        backdrop-filter: blur(3px);

        .title {
            font-size: 1.8vh;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #C9D7FF;
            -webkit-background-clip: text;
            // -webkit-text-fill-color: transparent;
            position: absolute;
            top: 3.5vh;
            left: 3.8vw;
        }

        .condition-bg {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .condition-area {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            z-index: 4;
            display: flex;
            flex-direction: column;
            padding-top: 5.208vw;
            padding-left: 2.08vw;
            box-sizing: border-box;

            .condition-item {
                width: 16.25vw;
                height: 1.875vw;
                background-color: #4FC2FF;
                margin-bottom: 1.67vh;
                background: rgba(58, 98, 255, 0.12);
                box-shadow: inset 0px 0px 2vh 1px rgba(21, 75, 224, 0.32);
                border-radius: 4px 4px 4px 4px;
                opacity: 1;
                border: 1px solid #154BE0;
                filter: blur(0px);
                display: flex;
                flex-direction: row;

                .left-top {
                    width: 0.37vw;
                    position: absolute;
                    left: -0.1vw;
                    top: -0.1vw;
                }

                .left-bottom {
                    width: 0.37vw;
                    position: absolute;
                    left: -0.1vw;
                    bottom: -0.1vw;
                }

                .right-top {
                    width: 0.37vw;
                    position: absolute;
                    right: -0.1vw;
                    top: -0.1vw;
                }

                .right-bottom {
                    width: 0.37vw;
                    position: absolute;
                    right: -0.1vw;
                    bottom: -0.1vw;
                }

                .title-box {
                    width: 31.89%;
                    height: 100%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    padding-left: 0.6vw;
                    box-sizing: border-box;
                    font-size: 1.5vh;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    // background-image: linear-gradient(180deg, #FFFFFF 0%, #91AFFF 100%);
                    // -webkit-background-clip: text;
                    // -webkit-text-fill-color: transparent;
                    color: #fff;
                }

                .right {
                    width: 26.7%;
                    height: 100%;
                    display: flex;
                    flex-direction: row;

                    .select-box {
                        position: relative;
                        width: 200px;

                        .left-top {
                            width: 1vw;
                            position: absolute;
                            left: -0.22vw;
                            top: -0.22vw;
                        }

                        .left-bottom {
                            width: 1vw;
                            position: absolute;
                            left: -0.22vw;
                            bottom: -0.22vw;
                        }

                        .right-top {
                            width: 1vw;
                            position: absolute;
                            right: -0.22vw;
                            top: -0.22vw;
                        }

                        .right-bottom {
                            width: 1vw;
                            position: absolute;
                            right: -0.22vw;
                            bottom: -0.22vw;
                        }
                    }

                    .select-box,
                    .city-select-item {
                        width: 4.36vw;
                        height: 2.96vh;
                    }

                    .select-box {
                        position: relative;
                    }

                    .select-box2 {
                        left: 0.52vw;
                    }

                    .select-box3 {
                        left: 1.04vw;
                    }

                    .select-box3,
                    .area-item {
                        width: 6.46vw;
                    }
                }

                // @media screen and (max-width: 1600px) {
                //     .title-box {
                //         font-size: 1.2vh;
                //     }
                // }

                .input-box {
                    width: 66%;
                    height: 100%;

                    .type-select-item {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .condition-item2 {
                background-color: rgba(0, 0, 0, 0);
                box-shadow: none;
                border: none;
            }

            .condition-item1 {
                width: 10.677vw;

                .tab {
                    width: 50%;
                    height: 100%;
                    line-height: 1.875vw;
                    font-size: 1.5vh;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    background-image: linear-gradient(180deg, #FFFFFF 0%, #91AFFF 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    text-align: center;
                    cursor: pointer;
                }

                .active {
                    background: linear-gradient(180deg, #2657C1 0%, rgba(38, 87, 193, 0.29) 100%);
                    box-shadow: inset 0px 0px 1vh 0px rgba(8, 29, 75, 0.53);
                    border-radius: 3px 0px 0px 3px;
                    opacity: 1;
                    border: 1px solid #154BE0;
                    color: #FFFFFF;
                    -webkit-text-fill-color: inherit;
                }
            }
        }
    }

    .map-area {
        width: 97vw;
        height: 59vh;
        position: absolute;
        left: 1.7vw;
        top: 7vh;
        z-index: 0;
    }

    .data-area {
        height: 30.56vh;
        width: 96.6%;
        position: absolute;
        left: 1.7%;
        bottom: 1.85vh;
        display: flex;
        flex-direction: row;
        align-items: center;
        z-index: 2;

        .header-title-box {
            width: 100%;
            height: 3.7vh;
            position: relative;
            border: 1px solid #154BE0;
            display: flex;
            flex-direction: row;
            align-items: center;

            .icon {
                width: 0.88vw;
                margin: 0 0.42vw 0 0.52vw;
            }

            .text {
                font-size: 0.8vw;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
                -webkit-background-clip: text;
            }

            .title-bg {
                height: 100%;
                position: absolute;
                right: 0;
            }

            .dian {
                width: 0.8vw;
                position: absolute;
            }

            .dian1 {
                left: -0.2vw;
                top: -0.5vh;
            }

            .dian2 {
                left: -0.2vw;
                bottom: -0.5vh;
            }

            .dian3 {
                right: -0.2vw;
                top: -0.5vh;
            }

            .dian4 {
                right: -0.2vw;
                bottom: -0.5vh;
            }
        }

        .left {
            width: 26.875vw;
            height: 100%;
            background: linear-gradient(135deg, rgba(21, 75, 224, 0) 0%, rgba(21, 75, 224, 0.1) 100%);
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
            border: 1px solid;
            border-image: linear-gradient(179deg, rgba(8, 139, 255, 0), rgba(8, 139, 255, 0.5), rgba(8, 139, 255, 0)) 1 1;

            .chart-box {
                width: 100%;
                height: 26.86vh;
            }
        }

        .mid::-webkit-scrollbar {
            width: 0 !important
        }

        .mid {
            margin: 0 1vw;
            width: 51.97vw;
            height: 100%;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            // grid-template-rows: 1fr 1fr 1fr;
            // grid-template-rows: 
            // grid-gap: 0.52vw;
            grid-column-gap: 0.52vw;
            grid-row-gap: 1.11vh;
            overflow-y: scroll;
            -ms-overflow-style: none;
            overflow: -moz-scrollbars-none;

            .item {
                cursor: pointer;
                background: linear-gradient(135deg, rgba(21, 75, 224, 0) 0%, rgba(21, 75, 224, 0.1) 100%);
                border-radius: 1px 1px 1px 1px;
                opacity: 1;
                border: 1px solid;
                border-image: linear-gradient(225deg, rgba(21, 75, 224, 0), rgba(21, 75, 224, 0.5), rgba(21, 75, 224, 0)) 1 1;
                position: relative;
                display: flex;
                flex-direction: row;
                align-items: center;
                backdrop-filter: blur(3px);
                height: 9.44vh;

                .icon {
                    width: 5.1vh;
                    height: 5.1vh;
                    margin: 0 0.52vw;
                }

                .data-box {
                    height: 5.5vh;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .title {
                        font-size: 0.68vw;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        -webkit-background-clip: text;
                        // -webkit-text-fill-color: transparent;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-line-clamp: 1;
                        -webkit-box-orient: vertical;
                    }

                    .data {
                        font-size: 1.4vw;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 500;
                        line-height: 3.2vh;
                        background-image: linear-gradient(180deg, #FFFFFF 0%, #698DF0 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                }

                .point {
                    width: 11px;
                    position: absolute;
                    top: 0;
                    right: 0;
                }
            }
        }

        .right {
            width: 15.9375vw;
            height: 100%;
            box-sizing: border-box;
            background: linear-gradient(135deg, rgba(8, 139, 255, 0) 0%, rgba(8, 139, 255, 0.1) 100%);
            border-radius: 3px 3px 3px 3px;
            opacity: 1;
            border: 1px solid;
            border-image: linear-gradient(179deg, rgba(8, 139, 255, 0), rgba(8, 139, 255, 0.5), rgba(8, 139, 255, 0)) 1 1;

            .enterprise-box::-webkit-scrollbar {
                width: 0 !important
            }

            .enterprise-box {
                width: 100%;
                height: 26.86vh;
                // padding: 0.926vh 0.469vw;
                padding: 0.926vh 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                overflow-y: scroll;
                -ms-overflow-style: none;
                overflow: -moz-scrollbars-none;

                .item {
                    width: 94%;
                    height: 4.8vh;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    padding-right: 1vw;
                    background: linear-gradient(135deg, rgba(8, 139, 255, 0) 0%, rgba(8, 139, 255, 0.1) 100%);
                    opacity: 1;
                    border: 1px solid;
                    border-image: linear-gradient(225deg, rgba(8, 139, 255, 0), rgba(8, 139, 255, 0.5), rgba(8, 139, 255, 0)) 1 1;
                    position: relative;
                    box-sizing: border-box;
                    margin-bottom: 5px;

                    .bg-box {
                        width: 10.92vw;
                        height: 100%;
                        position: absolute;
                        right: 0.31vw;
                        background: linear-gradient(276deg, #020E1A 0%, rgba(8, 17, 29, 0) 100%);
                        border-radius: 0px 0px 0px 0px;
                        opacity: 1;
                        filter: blur(0px);
                    }
                }

                .ou {
                    border: none;
                }

                .icon-box {
                    position: relative;

                    .number {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translateX(-66%) translateY(-55%);
                        font-size: 1.4vh;
                        font-family: PingFang SC, PingFang SC;
                        font-weight: 600;
                        color: #83B7FF;
                        -webkit-background-clip: text;
                    }

                    .rank-icon {
                        width: 6vh;
                    }
                }

                .enterprise-name {
                    font-size: 0.8vw;
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 500;
                    color: #5481FF;
                    -webkit-background-clip: text;
                    // -webkit-text-fill-color: transparent;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
}

::v-deep {
    .type-select-item {

        .el-input__inner {
            height: 1.875vw;
            opacity: 1;
            filter: blur(0px);
            font-size: 1.5vh;
            font-family: PingFang SC;
            font-weight: 400;
            background-color: transparent;
            border: none;
            color: #fff;
        }

        ::-webkit-input-placeholder {
            font-size: 1.5vh;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            color: #6576AD;
            line-height: 19px;
            -webkit-background-clip: text;
        }

        .el-input__suffix {
            height: 100%;
            right: 0.27vw;
        }

        .el-input__icon {
            font-size: 1.2vh !important;
        }

        @media screen and (max-width: 1600px) {
            .el-input__inner {
                font-size: 1.5vh;
            }
        }
    }

    .city-select-item {
        .el-input__inner {
            background: rgba(58, 98, 255, 0.12);
            box-shadow: inset 0px 0px 2.2vh 0px rgba(21, 75, 224, 0.32), inset 0px 0px 1vh 0px #517FFF;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            border: 1px solid #154BE0;
            filter: blur(0px);
            font-size: 1.4vh;
            font-family: PingFang SC;
            font-weight: 400;
            color: #fff;
            height: 2.96vh;
        }

        .el-input__suffix {
            height: 110%;
            right: 0.27vw;
        }

        .el-input__icon {
            font-size: 1.4vh !important;
        }

        .el-input.is-disabled .el-input__inner {
            background-color: transparent;
            border: none;
        }
    }

    .info-window {
        position: absolute;
        z-index: 4;
    }

    .global-tip {
        z-index: 10;
    }
}
</style>